<template>
   <div class="online">
    <div class="onlineBanner"></div>
    <div class="onlineBot">
      <h2 class="commonTitle onlineTitle">在线签约方法</h2>
      <div class="onlineTotal w1190">
         <ul class="onlineUl">
             <li class="onlineLi clearfix" v-for="(item,index) in stepList" :key="index">
                <img :src="item.onlineImg" alt="" class="pull-left onlineImg">
                <div class="pull-left onlineRight">
                    <h3 class="onlineH3">{{item.title}}</h3>
                    <h4 class="onlinH4">{{item.trip}}</h4>
                    <p class="onlineText">{{item.text}}</p>
                </div>
             </li>
         </ul>
         <div class="beginOuter text-center">
         <input type="button" value="开始使用" class="begin text-center" @click="onlineBeginUse">
         </div>
      </div>
  </div>
 </div>
</template>
<script>
export default {
  data() {
    return {
      //判断是否登录
      isLoginSucc: false,
      stepList: [
        {
          onlineImg: "img/online/online1.png",
          title: "STEP 01",
          trip: "上传您的文档",
          text:
            "只需要从您的计算机上上传Microsoft Word、PDF或其他常用文档格式，或者其他通用文档格式。或者用五孚提供的合同模板。"
        },
        {
          onlineImg: "img/online/online2.png",
          title: "STEP 02",
          trip: "指示谁需要签署",
          text:
            "添加签名人和其他收件人的姓名和电子邮件地址，甚至指定他们应该签署的顺序。"
        },
        {
          onlineImg: "img/online/online3.png",
          title: "STEP 03",
          trip: "放置标签并发送",
          text:
            "拖放五孚标签以指示您需要签名，初始或日期的位置。您还可以为签名者添加标准或自定义字段来填写，然后单击发送。五孚发送一个链接到每个收件人，他们可以用它来访问该文档。一旦文档完成，它被安全地存储，便于检索。"
        }
      ]
    };
  },
  methods: {
    //开始使用
    onlineBeginUse() {
      let ths = this;
      if (ths.$store.state.index.loginsucess == false) {
        ths.$router.push({ name: "Login" });
      } else {
        ths.$router.push({ name: "Person" });
      }
    }
  }
};
</script>

<style lang="less">
.online {
  .onlineBanner {
    width: 100%;
    height: 500px;
    background: url("~static/img/online/onlineBanner.png") center center;
  }
  .onlineBot {
    padding: 60px 0 80px 0;
    .onlineTitle {
      margin-bottom: 60px;
    }
    .onlineUl {
      .onlineLi {
        padding: 25px 50px 25px 0;
        border-bottom: 1px dashed #dddddd;
        .onlineImg {
          //   width: 290px;
          //   height: 180px;
          //   background: pink;
        }
        .onlineRight {
          margin: 15px 35px 0 70px;
          .onlineH3 {
            font-size: 1.6rem;
            font-weight: bold;
            color: #3a3a3a;
            line-height: 16px;
          }
          .onlinH4 {
            font-size: 1.6rem;
            font-weight: bold;
            color: #3a3a3a;
            list-height: 18px;
            margin: 20px 0 25px 0;
          }
          .onlineText {
            width: 740px;
            font-size: 1.4rem;
            line-height: 18px;
            color: #6a6a6a;
          }
        }
      }
    }
    .beginOuter {
      padding: 45px 0 0 0;
      .begin {
        width: 150px;
        height: 40px;
        border: 1px solid #eb3437;
        color: #eb3437;
        font-size: 1.8rem;
        background: none;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }
}
</style>

